<script type="text/javascript"> 
$(document).ready(function () {    
        var theme="energyblue";
	$("#buoibieudien_them").jqxButton({ theme:theme, width: 75, height: 45 });
	$("#buoibieudien_xoa").jqxButton({ theme:theme, width: 75, height: 45 });
	$("#buoibieudien_capnhat").jqxButton({ theme:theme, width: 75, height: 45  });
	$("#buoibieudien_huythaotac").jqxButton({ theme:theme, width: 75, height: 45  });
	$("#buoibieudien_luu").jqxButton({ theme:theme,width: 75, height: 45  });
        $("#buoibieudien_capnhatve").jqxButton({ theme:theme, width: 75, height: 45  });
        $("#buoibieudien_capnhattietmuc").jqxButton({ theme:theme, width: 75, height: 45  });
        
        $("#buoibieudien_them").bind("click", function(){
            $("#action").val("insert");
            $("#buoibieudien_congcu").setTrangThai(true);
            $("#tenbuoibieudien").val("");
            $("#thoigiandien").val("");
            $("#giodien").jqxMaskedInput({value: null });
            $("#chitietthem").val("");
            $("#diadiemdien").val("");
        });
        $("#buoibieudien_capnhat").bind("click", function(){
            var selectedrowindex = $("#buoibieudien_danhsach").jqxGrid('getselectedrowindex');
            if(selectedrowindex < 0){
                alert("Chưa có buổi biểu diễn nào được chọn");
            }else{
                $("#action").val("edit");
                $("#buoibieudien_congcu").setTrangThai(true);
            }
        });
        $("#buoibieudien_xoa").bind("click", function(){
            var selectedrowindex = $("#buoibieudien_danhsach").jqxGrid('getselectedrowindex');
            var rowscount = $("#buoibieudien_danhsach").jqxGrid('getdatainformation').rowscount;
            if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                var data = $('#buoibieudien_danhsach').jqxGrid('getrowdata', selectedrowindex);
                var confirmMessage = confirm("Bạn có chắc muốn xóa buổi biễu diễn: " + data["ten_buoi_dien"] + "?");
                var mabuoidien=data["ma_buoi_dien"];
                if (confirmMessage) $("#buoibieudien_danhsach").jqxGrid('deleterow', mabuoidien);    
            }
        });
        
        $("#buoibieudien_huythaotac").bind("click", function(){
            $("#buoibieudien_congcu").setTrangThai(false);
        });
        $("#buoibieudien_luu").bind("click", function(){
            $("#buoibieudien_thongtin").jqxValidator('validate');
            var isSuccess = $('#buoibieudien_thongtin').data("isSuccess");
            if (isSuccess){
                //khong co lõi xay ra
                $gio=String($('#giodien').val()).split(':')[0];
                $phut=String($('#giodien').val()).split(':')[1];
                if(parseInt($gio)<24 && parseInt($phut)<60){
                    var action = $("#action").val();
                    if (action == "insert"){
                        var datarow = generaterow(null);                
                        $("#buoibieudien_danhsach").jqxGrid('addrow', null, datarow);
                        console.log('added new row');
                    }
                    else if (action == "edit"){
                        //lay ra index cua HANG duoc chon
                        var selectedrowindex = $("#buoibieudien_danhsach").jqxGrid('getselectedrowindex');
                        //dem so luong hang cua list
                        var rowscount = $("#buoibieudien_danhsach").jqxGrid('getdatainformation').rowscount;
                        //neu hang do hop le
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            //lay id cua nhom nhac
                            var ma_buoi_dien = $("#buoibieudien_danhsach").jqxGrid('getrowid', selectedrowindex);

                            //tao du lieu, lay du lieu tu cac input trong form, va gan id
                            var datarow = generaterow(ma_buoi_dien);
                            //cho grid update du lieu
                            $("#buoibieudien_danhsach").jqxGrid('updaterow', ma_buoi_dien, datarow);
                        }
                    }
                    $("#buoibieudien_congcu").setTrangThai(false);
                }else{
                    alert("Giờ diễn sai. Mời nhập lại");
                }
            }
        });
        $("#buoibieudien_capnhattietmuc").bind("click", function(){
            var selectedrowindex = $("#buoibieudien_danhsach").jqxGrid('getselectedrowindex');
            if(selectedrowindex < 0){
                alert("Chưa có buổi biểu diễn nào được chọn");
            }else{
                $("#form_capnhattietmuc").jqxWindow('open');
            }
        });
        $.fn.setTrangThai = function (condition){
            //condition de chi ra trang thai moi cua form,
            //true se disable nut sua, them, xoa, va false se unlock tui no ra
            //cac nut
            $("#buoibieudien_them").jqxButton({"disabled": condition});
            $("#buoibieudien_capnhat").jqxButton({"disabled": condition});
            $("#buoibieudien_xoa").jqxButton({"disabled": condition});
            $("#buoibieudien_huythaotac").jqxButton({"disabled": !condition});
            $("#buoibieudien_luu").jqxButton({"disabled": !condition});
            //cac truong nhap lieu
            $("#buoibieudien_danhsach").jqxGrid({ disabled: condition});
            $("#tenbuoibieudien").jqxInput({"disabled": !condition});
            $("#giodien").jqxMaskedInput({"disabled": !condition});
            $("#ngaydien").jqxDateTimeInput({"disabled": !condition});
            $("#thoigiandien").jqxInput({"disabled": !condition});
            $("#chitietthem").jqxInput({"disabled": !condition});
            $("#diadiemdien").jqxInput({"disabled": !condition});
        };
    
        $("#buoibieudien_congcu").setTrangThai(false);
        var generaterow = function (ma_buoi_dien) {
            var row = {};
            row["ma_buoi_dien"] = ma_buoi_dien;
            row["ten_buoi_dien"] = $('#tenbuoibieudien').val();
            row["dia_diem"] = $('#diadiemdien').val();
            row["chi_tiet_them"] = $('#chitietthem').val();
            
            row["thoi_gian_bat_dau"] = $('#giodien').val();
            row["thoi_gian_dien"] = $('#thoigiandien').val();
            
            //lay gia tri cua #ngaysinh
            var ngaydien_unformated = $('#ngaydien').jqxDateTimeInput('value');
            var date = ngaydien_unformated.getDate().toString();
            var month = ngaydien_unformated.getMonth().toString();
            var year = ngaydien_unformated.getFullYear().toString();
            //theo dung dinh dang cua mysql nam/thang/ngay
            var ngaydien = year + "-" + month + "-" + date;
            
            row["ngay_dien"] = ngaydien;
            return row;
       };
});
</script>
<div id="buoibieudien_congcu" style="width: auto; height: auto; float: left">
    <div>
            <input id="buoibieudien_them" type="button" value="Thêm" />
    </div>
    <div>
            <input id="buoibieudien_xoa" type="button" value="Xóa" />
    </div>
    <div>
            <input id="buoibieudien_capnhat" type="button" value="Sửa" />
    </div>
    <div>
            <input id="buoibieudien_huythaotac" type="button" value="Hủy" />
    </div>
    <div>
            <input id="buoibieudien_luu" type="button" value="Lưu" />
    </div>
    <div>
            <input id="buoibieudien_capnhatve" type="button" value="vé" />
    </div>
    <div>
            <input id="buoibieudien_capnhattietmuc" type="button" value="tiết mục" />
    </div>
</div>